<template>
  <div>
    <h1>app</h1>
    <!-- 
      接口API分类
      reset接口 
      同一个路径（接口）可以做多个操作 由请求方式决定：
       get post put delete 但是一般get post
       get 从服务获取数据
       post  向服务器提交数据
       put  更新服务器已有数据
       delete 删除数据

       http://localhost:3000/classes
      
      非reset接口
      一个路径对应一个操作的是非reset接口

     -->
    <button @click="postClasses">向classes提交数据</button><br />
    <button @click="getClasses">get从classes中查询数据</button><br />
    <button @click="putClasses">put更新数据</button><br />
    <button @click="deleteClasses">delete</button>
  </div>
</template>

<script>
import axios from "axios";
export default {
  methods: {
    postClasses() {
      axios
        .post("http://localhost:3000/classes", {
          id: 2,
          name: "李哲书",
          hobby: "肤白貌美大长腿",
        })
        .then((res) => {
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getClasses() {
      axios
        .get("http://localhost:3000/classes")
        .then((res) => {
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    putClasses() {
      axios
        .put("http://localhost:3000/classes/1", {
          name: "超超",
          hobby: "比洋洋爱好学习",
        })
        .then((res) => {
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    deleteClasses() {
      axios
        .delete("http://localhost:3000/classes/2")
        .then((res) => {
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
</style>